<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>优惠设置</title>
    <script src="js/vue221.js" th:src="@{/js/vue.js}"></script>
    <script src="js/vue-router231.js" th:src="@{/js/vue-router.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="css/myelement.css" th:href="@{/css/myelement.css}"/>
    <!-- 引入组件库 -->
    <script src="js/element.js" th:src="@{/js/element.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">优惠设置</h1>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>设置</div>
        </div><!-- 页面头部 end -->

        <div class="main-content-body">
            <div class="edit-form">
                <el-form :model="dto" :rules="rules" ref="dataForm" :inline="true" class="demo-ruleForm">
                    <el-form-item label="开启阶梯满减" prop="mjOpen" style="display:block">
                        <el-switch v-model="dto.mjOpen"></el-switch>
                    </el-form-item>
                    <template v-if="dto.mjOpen">
                    	<div>
	                    <el-form-item label="订单满" prop="money1" class="inline">
	                        <el-input v-model.number="dto.money1" style="width: 100px" placeholder="元"></el-input> 元，
		                 </el-form-item>
		                 <el-form-item label="减" prop="free1" class="inline">
		                        <el-input v-model.number="dto.free1" style="width: 100px" placeholder="元"></el-input> 元，
		                 </el-form-item>
		                 </div>
		                 <div>
		                 <el-form-item label="订单满" prop="money2">
		                        <el-input v-model.number="dto.money2" style="width: 100px" placeholder="元"></el-input> 元，
		                 </el-form-item>
                         <el-form-item label="减" prop="free2">
                      	  <el-input v-model.number="dto.free2" style="width: 100px" placeholder="元"></el-input> 元，
                 		 </el-form-item>
                 		</div>
                 		<div>
		                 <el-form-item label="订单满" prop="money3">
		                        <el-input v-model.number="dto.money3" style="width: 100px" placeholder="元"></el-input> 元，
		                 </el-form-item>
                         <el-form-item label="减" prop="free3">
                        	<el-input v-model.number="dto.free3" style="width: 100px" placeholder="元"></el-input> 元，
                		 </el-form-item>
                		 </div>
                    </template>
                    
                    <el-form-item label="开启首单优惠" prop="ljOpen" style="display:block">
                        <el-switch v-model="dto.ljOpen"></el-switch>
                    </el-form-item>
                    <template v-if="dto.ljOpen">
	                    <el-form-item label="新用户首次下单立减" prop="ljFree">
	                       <el-input v-model.number="dto.ljFree" style="width: 100px" placeholder="元"></el-input> 元
	                    </el-form-item>
                    </template>

                    <div class="edit-button-fixed">
                        <div class="edit-button z-yuan-butn">
                            <el-button type="primary" @click="submitForm('dataForm')">保存</el-button>
                        </div>
                    </div>
                </el-form>

            </div>
        </div>
    </div>
</div>



</body>
<script src="js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data: {
            // form 表单数据
            dto: [[${dto}]],
            // form 表单验证规则
            rules: {
            	money1: [
                    { required: true, message: '请输入数字', trigger: 'blur' },
                    { type: 'number', message: '格式错误，请输入数字'}
                ],
                money2: [
                	{ required: true, message: '请输入数字', trigger: 'blur' },
                    { type: 'number', message: '格式错误，请输入数字'}
                ],
                money3: [
                	{ required: true, message: '请输入数字', trigger: 'blur' },
                    { type: 'number', message: '格式错误，请输入数字'}
                ],
                free1: [
                    { required: true, message: '请输入数字', trigger: 'blur' },
                    { type: 'number', message: '格式错误，请输入数字'}
                ],
                free2: [
                	{ required: true, message: '请输入数字', trigger: 'blur' },
                    { type: 'number', message: '格式错误，请输入数字'}
                ],
                free3: [
                	{ required: true, message: '请输入数字', trigger: 'blur' },
                    { type: 'number', message: '格式错误，请输入数字'}
                ],
                ljFree: [
                    { required: true, message: '请输入数字', trigger: 'blur' },
                    { type: 'number', message: '格式错误，请输入数字'}
                ]
            }
        },
        computed: {

        },
        methods: {
            // 提交表单
            submitForm(formName) {
                let self = this;
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        self.loading = true;
                        $.ajax({
                            url: "/vendor/cater/discounts/save",
                            type: "POST",
                            data: JSON.stringify(self.dto),
                            contentType: "application/json;charset=UTF-8",
                            dataType: "json",
                            success: function (data) {
                                if (data && data.returnCode == "1") {
                                    self.$message({
                                        showClose: true,
                                        duration: 1500,
                                        message: '设置外卖成功',
                                        type: 'success',
                                        customClass: 'message-center'
                                    });
                                } else {
                                    self.$message({
                                        showClose: true,
                                        duration: 1500,
                                        message: '设置外卖失败',
                                        type: 'error',
                                        customClass: 'message-center'
                                    });
                                    self.loading = false;
                                }
                            },
                            error: function () {
                                self.$message({
                                    showClose: true,
                                    duration: 1500,
                                    message: '系统异常，请联系管理员.',
                                    type: 'error',
                                    customClass: 'message-center'
                                });
                                self.loading = false;
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    });
</script>
</html>
